import React from "react";

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";

const BasicInfo = ({
  localTemplate,
  handleFieldChange,
  documentTemplates,
  template,
}) => {
  // 适用场景选项
  const scenarios = [
    { code: "highway", label: "高速公路" },
    { code: "roadsOrdinary", label: "普通公路(封路)" },
    { code: "electricPowerCircuit", label: "电力线路(停电)" },
    { code: "powerLinesWithoutPowerOutage", label: "电力线路(不停电)" },
    { code: "railwayOrdinary", label: "普通铁路" },
    { code: "riverWay", label: "通航河流" },
    { code: "others", label: "其他" },
  ];

  // 处理场景选择变化
  const handleScenarioChange = (scenarioCode, isChecked) => {
    const currentScenarios = localTemplate.applicableScenarios || [];
    if (isChecked) {
      handleFieldChange("applicableScenarios", [
        ...currentScenarios,
        scenarioCode,
      ]);
    } else {
      handleFieldChange(
        "applicableScenarios",
        currentScenarios.filter((s) => s !== scenarioCode)
      );
    }
  };

  return (
    <>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
          <Label className="block text-sm font-medium mb-1">方法名称</Label>
          <Input
            value={localTemplate.methodName || ""}
            onChange={(e) => handleFieldChange("methodName", e.target.value)}
            placeholder="例如: 无人机牵引施工法"
          />
        </div>
        <div>
          <Label className="block text-sm font-medium mb-1">方法代码</Label>
          <Input
            value={localTemplate.methodCode || ""}
            onChange={(e) => handleFieldChange("methodCode", e.target.value)}
            placeholder="例如: droneStringing"
            required
            disabled={!!template}
          />
          {!!template && (
            <p className="text-xs text-gray-500 mt-1">代码创建后不可修改</p>
          )}
        </div>
      </div>

      <div>
        <Label className="block text-sm font-medium mb-1">方法描述</Label>
        <Textarea
          value={localTemplate.description || ""}
          onChange={(e) => handleFieldChange("description", e.target.value)}
          placeholder="详细描述该施工方法的特点、适用范围等"
          rows={3}
        />
      </div>

      <div>
        <Label className="block text-sm font-medium mb-1">适用场景</Label>
        <div className="flex flex-wrap gap-3 p-3 bg-gray-50 rounded-lg border">
          {scenarios.map((scenario) => (
            <div key={scenario.code} className="flex items-center gap-2">
              <input
                type="checkbox"
                id={`scenario-${scenario.code}`}
                checked={(localTemplate.applicableScenarios || []).includes(
                  scenario.code
                )}
                onChange={(e) =>
                  handleScenarioChange(scenario.code, e.target.checked)
                }
                className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
              />
              <label htmlFor={`scenario-${scenario.code}`} className="text-sm">
                {scenario.label}
              </label>
            </div>
          ))}
        </div>
      </div>

      <div>
        <Label className="block text-sm font-medium mb-1">
          默认文档模板 (可选)
        </Label>
        <Select
          value={localTemplate.documentTemplateId ?? "_none_"}
          onValueChange={(value) =>
            handleFieldChange(
              "documentTemplateId",
              value === "_none_" ? null : value
            )
          }
        >
          <SelectTrigger>
            <SelectValue placeholder="为此施工方法选择一个默认的文档模板" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="_none_">无</SelectItem>
            {documentTemplates.map((dt) => (
              <SelectItem key={dt.id} value={dt.id}>
                {dt.name} (v{dt.version})
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
        <p className="text-xs text-gray-500 mt-1">
          当在创建施工方案时选择此方法，将自动关联这个文档模板。
        </p>
      </div>
    </>
  );
};

export default BasicInfo;
